<script setup>

</script>
<template>
	<view class="box" hover-class="boxHover">
		<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>

	<view>
		<navigator url="/pages/demo1/demo1" open-type="reLaunch">
			<image src="/static/pic2.jpg">
			</image>
		</navigator>
	</view>
	<view>--------</view>

	<view>
		<navigator url="/pages/demo1/demo1" open-type="reLaunch">跳转到demo1</navigator>
	</view>

	<scroll-view scroll-x class="scrollView">
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
		<view class="box">scroll子元素</view>
	</scroll-view>
</template>

<style lang="scss">
	.scrollView {
		width: 80%; //屏幕的80%
		height: 220px;
		border: 1px solid green;
		white-space: nowrap; //不换行

		.box {
			width: 100px;
			height: 100px;
			background-color: greenyellow;
			display: inline-block; //默认block（块）,inline-block(行级块元素)
			margin: 5px;
		}
	}
</style>